<template>
  <view class="tail-page">
    <view class="card-top" @click="toPayThail()">
      <div class="cxyhq">
        <b>出行套餐券&nbsp;最低优惠</b>
      </div>
      <div class="xzgm">
        <b>现在购买&nbsp;立享优惠</b>
      </div>
      <button class="ljgm">立即购买</button>
    </view>
    <block v-for="(item,index) in cardlList" :key="index">
      <view class="list text-center">
        <view class="item">
          <view class="item-one">
            <b v-if="item.couponType==2">￥{{ item.minMoney }}</b>
            <b v-if="item.couponType==1">{{ item.sale }}折</b>
          </view>
          <view class="item-two">
            <div class="center-two">
              <span class="xrcxq">{{ item.thaliName }}</span>
            </div>
            <div class="center-two">
              <span class="yxqz">有效期至{{item.endTime}}</span>
            </div>
          </view>

          <view class="item-three">
            <button class="pay-button" @click="toPay( item.id )">立即使用</button>
          </view>
        </view>
        <view class="item-bottom">
          <view class="item-wh">
            <div class="item-bottom-left">
              <span>限时段&nbsp;|&nbsp;限订单&nbsp;|&nbsp;限车型&nbsp;|&nbsp;限使用渠道</span>
            </div>
            <div class="item-bottom-right" @click="toSelectOne( item.couponId )">
              <span class="yhq">查看详情></span>
            </div>
          </view>
        </view>
      </view>
    </block>
    <div class="sxq" @click="toSelectStatusList()">
      <span>
        查看失效券>
      </span>
    </div>
    <div class="page-bottom">
      <div class="bottom-left"  @click="toSelectBuyList()">
        <span class="gmjl">购买记录</span>
      </div>
      <div class="hh">
        |
      </div>
      <div class="bottom-right" @click="showModal">
        <span class="qmdh">券码兑换</span>
      </div>
    </div>

    <view class="modal-mask" @click="hideModal" v-if="isModalVisible"></view>
      <view class="modal-content" v-if="isModalVisible">
        <view class="modal-header">
          <text class="modal-title">券码兑换</text>
        </view>
        <view class="modal-body">
          <text class="modal-label">请输入兑换券码:</text>
          <input class="modal-input" v-model="couponCode" placeholder="请输入券码" />
        </view>
        <view class="modal-footer">
          <button class="modal-button" @click="hideModal">取 消</button>
          <button class="modal-button primary" @click="handleConfirm">确 定</button>
        </view>

      </view>

  </view>

</template>
<script>

import { selectCardPackageList } from '@/api/durian/thail/thail.js';
import { getCouponExchange } from '@/api/durian/thail/thail.js';


export default {
  data() {
    return {
      cardlList: [],
      isModalVisible: false,
      couponCode: ''
    };
  },
  onLoad() {
    this.selectMyCard();
  },
  methods: {
    toPayThail(){
      this.$tab.navigateTo('/pages/mine/tail/index')
    },
    handleConfirm() {
      console.log(this.couponCode)
      // 在这里处理兑换逻辑
      getCouponExchange(this.couponCode).then(res=>{
        this.$modal.msgSuccess('兑换成功');
        this.hideModal();
        this.form();
      })
    },
    showModal() {
      this.isModalVisible = true;
    },
    hideModal() {
      this.isModalVisible = false;
      this.form();
    },
    form(){
      this.couponCode="";
    },
    toSelectStatusList(){
      this.$tab.navigateTo('/pages/mine/tail/couponStatus')
    },
    toSelectBuyList(){
      this.$tab.navigateTo('/pages/mine/tail/myPayList')
    },
    selectMyCard() {
      selectCardPackageList().then(res=>{
        this.cardlList=res.rows;
      })
    },
    toSelectOne(id){
      this.$tab.navigateTo('/pages/mine/tail/coupon?id='+JSON.stringify(id))
    }
  }


}
</script>

<style>

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {

  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.modal-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.modal-label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
}

.modal-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}

.modal-button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 4px;
  margin-right: 10px;
}

.modal-button.primary {
  background-color: #409eff;
  color: #fff;
}
.hh{
  position: absolute;
  left: 187px;
  top: 20px;
  color: #8f8f94;
}
.gmjl{
  padding-top: 20px;
  margin-left: 100px;
}
.qmdh{
  margin-left: 35px;
}
.bottom-left{
  float: left;
  display: inline-block;
  width: 180px;
  margin-top: 20px;
  margin-bottom: auto;
}
.bottom-right{
  display: inline-block;
  width: 180px;
  margin-top: 20px;
  margin-bottom: auto;
}
.page-bottom{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  // 盒子居中

  background-color: white;
}
.sxq{
  position: absolute;
  top: 700px;
  //position: absolute;
  //top: 700px;
  left: 155px;
  color: #8f8f94;
  position: fixed;
  bottom: 65px;
  width: 100%; /* 或者根据需要设置宽度 */
  // 居中


}
.item-bottom-right{
  position: relative;
  right: 20px;
  top: -15px;
  margin-left: 300px;
  font-size: 10px;
  width: 50px;
  height: 30px;
}
.item-wh{
  width: 340px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px dashed #8f8f94;
}
.item-bottom-left{
  display: flex;
  width: 250px;
  font-size: 10px;
  color: #9a9a9a;
  margin-top: 13px;
}
.item-bottom{
  display: flex;
  width: 360px;
  height: 40px;
  background-color: #fdf2ed;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0px 0px 5px 5px;
}
.xrcxq{
  font-size: 12px;
  margin-top: 10px;
}
.center-two{
  display: flex;
}
.yxqz{
  font-size: 10px;
}
.ljgm{
  position: relative;
  display: flex;
  width: 70px;
  height: 25px;
  font-size: 10px;
  border-radius: 20px;
  margin-left: 10px;
  margin-top: 11px;
  color: #a21706;
}
.xzgm {
  margin-left: 10px;
  padding-top: 5px;
  color: white;
  font-size: 12px;
}
.cxyhq{
  margin-left: 10px;
  padding-top: 10px;
  color: white;
  font-size: 17px;
}
.card-top{
  margin-top: 10px;
  width: 360px;
  margin-left:auto;
  margin-right: auto;
  border-radius: 10px;
  height: 100px;
  background-image: url("/static/images/beijign.png");
  background-size: cover;
  background-position: center;
  //background-repeat: no-repeat;

}

.item {
  display: flex;
  width: 360px;
  height: 12vh;
  background-color: #fdf2ed;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px 5px 0px 0px;
}
.item-one{
  display: flex;
  font-size: 25px;
  color: #a21706;
  height: 15vh;
  margin-top: 30px;
  margin-bottom: auto;
  margin-left: 20px;
  margin-right: auto;
  padding-top: 5px;
}
.item-two{
  width: 200px;
  //position: relative;
  //top: 10%;
  //left: 50%;;
  height: 80px;
  margin-left: 10px;
  padding-top: 25px;
}
.tail-math{
  font-size: 10px;
}

.item-three{
  height: 15vh;
  margin-top: 25px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
}

.pay-button{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  width: 70px;
  height: 25px;
  background-color: indianred;
  color: white;
  border-radius: 30px;
  font-size: 10px;
}
</style>
